Reactstrap — Badges and Breadcrumbs

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add badges and breadcrumbs with Reactstrap.

Badges

We can add badges to display some content besides another piece of text.

To add them, we use the Badge component:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <h1>
        Heading <Badge color="primary">New</Badge>
      </h1>
      <h2>
        Heading <Badge color="primary">New</Badge>
      </h2>
      <h3>
        Heading <Badge color="primary">New</Badge>
      </h3>
      <h4>
        Heading <Badge color="primary">New</Badge>
      </h4>
      <h5>
        Heading <Badge color="primary">New</Badge>
      </h5>
      <h6>
        Heading <Badge color="primary">New</Badge>
      </h6>
    </div>
  );
}

We add badges in various heading tags.

The color prop changes the color.

The badges scale to the same size as the text beside it.

Badges can be used for counters in buttons:

import React from "react";
import { Badge, Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Button color="primary" outline>
        messages <Badge color="info">100</Badge>
      </Button>
    </div>
  );
}

We add the Badge in the button to display a number beside the button text.

Contextual Variations

There are many variations of badges.

They have different colors.

We can change the color prop:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="danger">Danger</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="info">Info</Badge>
      <Badge color="light">Light</Badge>
      <Badge color="dark">Dark</Badge>
    </div>
  );
}

We set the color prop to those choices to set the colors we want.

Pills

We can make them rounded with the pill prop:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge color="primary" pill>
        Primary
      </Badge>
      <Badge color="secondary" pill>
        Secondary
      </Badge>
      <Badge color="success" pill>
        Success
      </Badge>
      <Badge color="danger" pill>
        Danger
      </Badge>
      <Badge color="warning" pill>
        Warning
      </Badge>
      <Badge color="info" pill>
        Info
      </Badge>
      <Badge color="light" pill>
        Light
      </Badge>
      <Badge color="dark" pill>
        Dark
      </Badge>
    </div>
  );
}

The pill prop make the border-radius rounder.

Links

Badges can also have links.

For example, we can write add the href prop to them:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge href="#" color="primary">
        Primary
      </Badge>
      <Badge href="#" color="secondary">
        Secondary
      </Badge>
      <Badge href="#" color="success">
        Success
      </Badge>
      <Badge href="#" color="danger">
        Danger
      </Badge>
      <Badge href="#" color="warning">
        Warning
      </Badge>
      <Badge href="#" color="info">
        Info
      </Badge>
      <Badge href="#" color="light">
        Light
      </Badge>
      <Badge href="#" color="dark">
        Dark
      </Badge>
    </div>
  );
}

The href prop goes in the Badge component.

Breadcrumbs

Breadcrumbs let us navigate to different pages by providing the links for the navigation hierarchy.

To add it, we use the Breadcrumb and BreadcrumbItem components.

For example, we write:

import React from "react";
import { Breadcrumb, BreadcrumbItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <BreadcrumbItem active>Home</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Profile</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a href="#">Profile</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Setting</BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

The Breadcrumb component has the breadcrumb and BreadcrumbItem component has the breadcrumb item.

The active prop makes an item active.

If it’s active, then it shouldn’t have a link.

Other props include tag to change the tag that the breadcrumb is rendered as.

listTag is the tag that the breadcrumb list container are rendered as.

BreadcrumItem also takes a tag prop to change the tag it’s rendered as.

For example, we can write:

import React from "react";
import { Breadcrumb, BreadcrumbItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb tag="nav" listTag="div">
        <BreadcrumbItem tag="a" href="#">
          Home
        </BreadcrumbItem>
        <BreadcrumbItem tag="a" href="#">
          Profile
        </BreadcrumbItem>
        <BreadcrumbItem tag="a" href="#">
          Settings
        </BreadcrumbItem>
        <BreadcrumbItem active tag="span">
          Language
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

We set the tags to change the element they’re rendered as.

Conclusion

Reactstrap comes with components for badges and breadcrumbs.